<template>
  <div class="home-page">
    <!-- 导航栏 -->
    <van-tabs @click="dedao" v-model="activeIndex">
      <van-tab v-for="item in list" :title="item.name" :key="item.id" :name="item.id">
    <!-- 父传子给list -->
       <article-list :channelslist="channelslist"></article-list>
      </van-tab>
    </van-tabs>
 <div class="btn-wrapper">
  <!-- 搜索框 -->

      <van-icon name="search"></van-icon>

  <!-- 频道列表 -->
      <van-icon name="notes-o" @click.native="showChannel=true"></van-icon>
    <!-- 内容 我的频道数据传过去 -->
      <article-channel @bling="dedao" v-model="showChannel"  :activeIndex="activeIndex" :list="list"></article-channel>

  <!-- 频道组件 -->

    </div>
<app-tabbar></app-tabbar>
  </div>
</template>

<script>

import { getMyChannels } from '@/api/channel'
import { getArticle } from '@/api/article'

import AppTabbar from '@/components/App-tabbar.vue'
import ArticleList from '@/components/Article-list.vue'
import ArticleChannel from '@/components/Article-channel.vue'

export default {
  components: { AppTabbar, ArticleList, ArticleChannel },
  name: 'HomePage',
  data () {
    return {
      list: [],
      channelslist: [],
      show: false,
      // 控制频道组件显示隐藏
      showChannel: false,
      allChannels: [],
      activeIndex: 0
    }
  },
  // 获取我的导航频道
  async created () {
    const res = await getMyChannels()
    // console.log(res)
    this.list = res.data.channels

    // 文章详情
    const result = await getArticle({
      channel_id: this.list[0].id,
      timestamp: +new Date()
    })
    // console.log(result)
    this.channelslist = result.data.results
  },
  methods: {
    // 点击导航列表 跳到相对应文章页面
    async dedao (name) {
      this.activeIndex = name
      // console.log(name)
      const res = await getArticle({
        channel_id: name,
        timestamp: +new Date()
      })
      // console.log(res)// data.results
      this.channelslist = res.data.results
    }

  }
}
</script>

<style scoped lang="less">
.home-page {
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    .van-icon {
      flex: 1;
      text-align: center;
      font-size: 18px;
    }
    &::before {
      content: "";
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), #fff);
    }
  }
}
</style>
